<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid layout demo</title>
    <!-- grid布局 -->
    <style>
        html,body{
            height: 100vh;
            margin: 0px;
        }
        main{
            height: 100vh;
            display: grid;
            grid-template-rows: 100px auto 40px;
            grid-template-columns: 200px auto;
            grid-template-areas: "header header"
                                "nav section"
                                "footer footer"
        }
        #header,#article,#nav,#section,#footer{
            border: 1px #ccc solid;
        }
        #header{
            grid-area: header;
        }
        #article{
            grid-area: article;
        }
        #nav{
            grid-area: nav;
        }
        #section{
            grid-area: section;
        }
        #footer{
            grid-area: footer;
        }
    </style>
</head>
<body>
    <main>
        <header id="header">
            <h1 style="text-indent: -9999px;">NNBlog</h1>
        </header>
        <nav id="nav">menu</nav>
        <section id="section">main page</section>
        <footer id="footer">info</footer>
    </main>
</body>
</html>